import React, { Component } from 'react'
import { mylogin, dellogin } from "../../api/index"

export default class My extends Component {
    state = {
        mylogin: [],
        //
        img: sessionStorage.getItem('img'),
        //
        username: sessionStorage.getItem('username'),
        //用户类型
        auth: sessionStorage.getItem('auth'),
    }


    //移动 列表
    getList() {
        mylogin().then((res) => {
            console.log(res);
            // this.setState({
            //     mylogin: res.data.data,
            // });
            if (res.data.code === 200) {
                // this.mylogin = res.data.data;
                this.setState({
                    mylogin: res.data.data,
                });
            } else {
                this.props.history.push('/login')
                window.sessionStorage.clear()
            }
        });
    }
    componentDidMount() {
        this.getList();
    }
    //删除
    Del(id) {
        dellogin({ id }).then((res) => {
            this.getList();
            //   this.props.history.go(0);
        });
    }
    //退出登录
    login = () => {
        this.props.history.push('/login')
        window.sessionStorage.clear()
    }
    //切换账号
    Tab = () => {
        window.sessionStorage.clear()
        // 页面刷新
        window.location.reload();

    }

    render() {

        const { mylogin, img, username, auth } = this.state

        return (
            <div className='my'>
                <div className="mylist">
                    <div></div>
                    <dl>
                        <dt>
                            <img src={img} alt="" />
                        </dt>
                        <dd>
                            <p>
                                <span>
                                    {username}
                                </span>
                                <span>
                                    {auth}
                                </span>
                            </p>
                        </dd>
                    </dl>
                    <div onClick={() => { this.login() }} className='button'>
                        退出登录
                    </div>
                </div>

                <div className="myh5">
                    <h2>移动账号管理:</h2>
                    {
                        mylogin ? mylogin.map((item, index) => {
                            return <div className="h5list" key={index}>
                                <dl >
                                    <dt>
                                        <img src={item.img} alt="" />
                                    </dt>
                                    <dd>
                                        <p>账号/用户名:{item.username}</p>
                                        <p>密码:{item.password}</p>
                                    </dd>
                                </dl>
                                <p>
                                    <button onClick={() => this.Del(item.id)}>
                                        删除
                                    </button>
                                    <button onClick={() => this.Tab(item.id)}>
                                        切换
                                    </button>
                                </p>
                            </div>
                        }) : null
                    }
                </div>
            </div>
        )
    }
}